import React from 'react'
import { Tabs, Toast } from 'antd-mobile'
import {
  Form,
  Input,
  Button,
} from 'antd-mobile'
import request from '../../api/request';
import { useNavigate } from 'react-router-dom';
import NavPruop from '../../compoents/NavPruop/Index'
function Index() {
  const navigate = useNavigate();

  const onFinish = async (values) => {
    const res = await request.post('/api/login', values);
    console.log(res);
    if(res.code===200){
      localStorage.setItem('token',res.data.token);
      Toast.show('登录成功');
      navigate('/index')
    }else{
      Toast.show('登录失败')
    }
  }
  return (
    <div>
      <h3 style={{ textAlign: 'center' }}> 登录可想更多权益 </h3>
      <div style={{ marginTop: 30 }}>
        <Tabs>
          <Tabs.Tab title='APP登录' key='fruits'>
            <img style={{ width: '280px', height: '280px', marginLeft: '40px' }}
             src="https://img2.baidu.com/it/u=1768404723,1269675887&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" />
             <NavPruop></NavPruop>
          </Tabs.Tab>
          <Tabs.Tab title='免密登录' key='vegetables'>
            直接登录
          </Tabs.Tab>
          <Tabs.Tab title='密码登录' key='animals'>


            <Form
              name='form'
              onFinish={onFinish}
              footer={
                <Button block type='submit' color='primary' size='large'>
                  登录
                </Button>
              }
            >
              <Form.Header>密码登录</Form.Header>

              <Form.Item
                name='username'
                label='姓名'
                rules={[{ required: true, message: '姓名不能为空' }]}
              >
                <Input placeholder='请输入姓名' />
              </Form.Item>

              <Form.Item
                name='password'
                label='密码'
                rules={[{ required: true, message: '密码不能为空' }]}
              >
                <Input placeholder='请输入密码' />
              </Form.Item>

            </Form>


          </Tabs.Tab>
        </Tabs>
      </div>

    </div>
  )
}

export default Index
